<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="960px"
    @close="close"
  >
    <el-form v-if="dialogVisible">
      <el-form-item label="用户名">
        <el-input
          placeholder="请输入用户名"
          v-model="queryData.title"
          style="width: 600px"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色权限" label-width="200">
        <el-tree
          style="margin-left"
          node-key="id"
          :data="data"
          :props="defaultProps"
          :show-checkbox="true"
          :default-expand-all="true"
          :default-checked-keys="queryData.permissions"
          ref="tree"
        >
        </el-tree>
      </el-form-item>
      <el-form-item label="">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { addPermissionList, EditPermissionInfoList } from "@/api/permissions";
export default {
  name: "EditPermission",
  data() {
    return {
      dialogVisible: false,
      data: [],
      queryData: {},
      resourceCheckedKey: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
    };
  },
  methods: {
    async btnOK() {
      // console.log(this.$refs.tree.getCheckedKeys());
      this.queryData.permissions = this.$refs.tree.getCheckedKeys();
      try {
        if (this.queryData.id) {
          // console.log(this.queryData);
          await EditPermissionInfoList(this.queryData);
          this.$message.success("修改用户成功");
        } else {
          if (this.queryData.title == "")
            return this.$message.warning("请输入用户名");
          await addPermissionList(this.queryData);
          this.$message.success("添加用户成功");
          this.dialogVisible = false;
        }
      } catch (error) {
        console.log(error);
      }
      this.close();
      this.$emit("updataList");
    },
    close() {
      this.queryData = {};
      this.dialogVisible = false;
    },
    created() {},
  },
};
</script>
<style  >
.el-dialog__header {
  background-color: #409eff !important;
}
</style>